<template>
	<view class="search-container">
		<view class="search-hd">
			<u-form id="myForm" :model="form" :border-bottom="false" label-position="left" label-align="center" :label-width="160"
			 :label-style="labelStyle" ref="uForm">
				<u-form-item label="筛 选" class="my-form-item" style="padding-top: 30rpx;height: 118rpx;margin-top: 15rpx;">
					<u-input class="my-input-rp02name" v-model="form.rp02name" :height="98" type="select" placeholder="一级销区"
					 :select-open="show" @click="showFn()" />
					<u-input class="my-input-rp03name" v-model="form.rp03name" :height="98" type="select" placeholder="二级销区"
					 :select-open="show2" @click="show2Fn()" />
					<u-input class="my-input-brand" v-model="form.brand" :height="98" type="select" placeholder="品牌名称" :select-open="show3"
					 @click="show3Fn()" />
				</u-form-item>
				<u-form-item label="门店名称" class="my-form-item">
					<input class="my-input-storeAddress" style="height: 98rpx;" v-model="form.storeName" type="text" placeholder="请输入" @input="change">
				</u-form-item>
			</u-form>
		</view>
		<view class="search-bd">
			<!-- <view v-if="mySearchList.length > 0" style="width: 100%;height: 100%;">
				<scroll-view class="content" scroll-y style="width: 100%;height: 100%;">
					<view class="search-bd-item" v-for="(store,index) in mySearchList" :key="index" @click="selectedStore(store)">{{ store.storeName }}</view>
					<view style="clear: both;"></view>
				</scroll-view>
			</view> -->
			
			<view v-if="(showNearStore == true && nearStoreList.length > 0)" style="width: 100%;height: 100%;">
				<scroll-view class="content" scroll-y style="width: 100%;height: 100%;">
					<view class="search-bd-item" v-for="(store,index) in nearStoreList" :key="index" @click="selectedStore(store)">{{ store.storeName }}</view>
					<view style="clear: both;"></view>
				</scroll-view>
			</view>
			
			<view v-if="(showNearStore == false) && (storeList.length>0)" style="width: 100%;height: 100%;">
				<scroll-view class="content" scroll-y @scrolltolower="getMoreStore()" style="width: 100%;height: 100%;">
					<view class="search-bd-item" v-for="(store,index) in storeList" :key="index" @click="selectedStore(store)">{{ store.storeName }}</view>
					<view style="clear: both;"></view>
				</scroll-view>
			</view>
			<view v-if="((showNearStore == false) && (storeList.length == 0)) || ((showNearStore == true) && (nearStoreList.length == 0))" class="my-u-line-1 u-font-md" style="color: #CCCCCC;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">暂无数据</view>
		</view>
		<strong>
			<u-picker mode="selector" class="my-u-picker" v-model="show" @confirm="actionSheetCallback" :range="actionSheetList"
			 :z-index="9999" range-key="rp02name"></u-picker>
		</strong>
		<u-picker mode="selector" class="my-u-picker" v-model="show2" @confirm="actionSheetCallback2" :range="actionSheetList2"
		 :z-index="9999" range-key="rp03name"></u-picker>
		<u-picker mode="selector" class="my-u-picker" v-model="show3" @confirm="actionSheetCallback3" :range="actionSheetList3"
		 :z-index="9999" range-key="brand"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getRp02nameList,
		getRp03nameList,
		getBrandList,
		getNearByStores,
		getStoreList
	} from '../../common/service.js'

	export default {
		data() {
			return {
				preId: '',
				labelStyle: {
					'height': '98rpx',
					'color': '#666666',
					'font-size': '28rpx',
					'font-family': 'PingFangSC-Regular, PingFang SC',
					'font-weight': '400',
					'display': 'flex',
					'justify-content': 'space-between'
				},
				form: {
					rp02: '',
					rp02name: '',
					rp03: '',
					rp03name: '',
					brandCode: '',
					brand: '',
					storeName: '',
					storeAddress: '',
					remark: ''
				},
				province: '',
				city: '',
				latitude: null,
				longitude: null,
				show: false,
				show2: false,
				show3: false,
				canGetMoreStore: true,
				currentPage: 1,
				actionSheetList: [],
				actionSheetList2: [],
				actionSheetList3: [],
				storeList: [],
				// mySearchList: [],
				showNearStore: true,
				nearStoreList: [],
				queryTimer:null
			}
		},
		onLoad: function(option) {
			const that = this;
			that.clearData(function() {
				that.initPage(option);
			});
			this.$watch('form.storeName', (newVal)=>{
				console.log(newVal)
				if (this.queryTimer) {
					clearTimeout(this.queryTimer)
				}
				this.queryTimer = setTimeout(() => {
					this.change(newVal)
				}, 1000)
			})
		},
		onShow: function() {
			console.log(this.CONFIG);
			const pages = getCurrentPages();
			console.log('搜索页，获取当前页面栈层数：');
			console.log(pages);
		},
		methods: {
			initPage: function(option) {
				console.log('initPage',option)
				const that = this;
				that.LOGINACTION(function() {
					that.preId = option.preId || '';
					that.province = option.province || '';
					that.city = option.city || '';
					that.latitude = option.latitude || '';
					that.longitude = option.longitude || '';
					that.form.rp02 = that.CONFIG.user.rp02 || that.form.rp02;
					that.form.rp02name = option.rp02name ? option.rp02name : (that.CONFIG.user.rp02name || that.form.rp02name);
					that.form.rp03 = that.CONFIG.user.rp03 || that.form.rp03;
					that.form.rp03name = option.rp03name ? option.rp03name : (that.CONFIG.user.rp03name || that.form.rp03name);
					that.form.brandCode = that.CONFIG.user.brandCode || that.form.brandCode;
					that.form.brand = option.brand ? option.brand : (that.CONFIG.user.brand || that.form.brand);
					that.form.storeName = option.storeName ? option.storeName : (that.CONFIG.user.storeName || that.form.storeName);
					that.form.storeAddress = that.CONFIG.user.storeAddress || that.form.storeAddress;
					that.form.remark = option.remark ? option.remark : '';
					that.currentPage = 1;
					that.getNearLocation();
				});
			},
			clearData: function(call) {
				const that = this;
				that.preId = '';
				that.form = {
					rp02: '',
					rp02name: '',
					rp03: '',
					rp03name: '',
					brandCode: '',
					brand: '',
					storeName: '',
					storeAddress: '',
					remark: ''
				};
				that.province = '';
				that.city = '';
				that.latitude = null;
				that.longitude = null;
				that.show = false;
				that.show2 = false;
				that.show3 = false;
				that.canGetMoreStore = true;
				that.currentPage = 1;
				that.actionSheetList = [];
				that.actionSheetList2 = [];
				that.actionSheetList3 = [];
				that.storeList = [];
				// that.mySearchList = [];
				that.showNearStore = true;
				that.nearStoreList = [];
				if (call) {
					call();
				}
			},
			getCode: function() {
				return this.CONFIG.user.id;
			},
			change: function(name) {
				const that = this;
				/* console.log('门店名称已改变：' + name);
				if (name == '') {
					that.showNearStore = true;
					return;
				} */
				// 发起请求2，进行条件搜索门店
				this.form.storeName = name.detail?name.detail.value:name;
				this.currentPage = 1;
				this.queryStoreList();
				
				// // 筛选 功能
				// if ((that.showNearStore == true && that.nearStoreList.length > 0) || (that.showNearStore == false && that.storeList.length == 0 && that.nearStoreList.length > 0)) {
				// 	// 从附近门店nearStoreList中筛选
				// 	var list = [];
				// 	that.nearStoreList.forEach(function(item) {
				// 		if (item.storeName.indexOf(name) !== -1) {
				// 			list.push(item);
				// 		}
				// 	})
				// 	that.mySearchList = list;
				// } else if (that.showNearStore == false && that.storeList.length > 0) {
				// 	// 从查询门店结果storeList中筛选
				// 	var list = [];
				// 	that.storeList.forEach(function(item) {
				// 		if (item.storeName.indexOf(name) !== -1) {
				// 			list.push(item);
				// 		}
				// 	})
				// 	that.mySearchList = list;
				// } else {
				// 	that.mySearchList = [];
				// }
				
			},
			getMoreStore: function() {
				if (this.canGetMoreStore == false) {
					return;
				}
				this.queryStoreList(true);
			},
			selectedStore: function(store) {
				const that = this;
				if (that.preId) {
					store.preId = that.preId;
				}
				if (that.form.remark) {
					store.MyRemark = that.form.remark;
				}
				uni.setStorage({
					key: 'storeItem',
					data: store,
					success() {
						uni.navigateBack({
							delta: 1,
							animationType: 'pop-out',
							animationDuration: 200
						});
					}
				});
			},
			queryStoreList: function(more) {
				const that = this;
				that.showNearStore = false;
				if (more) {
					that.currentPage = that.currentPage + 1;
				}
				// 根据一级销区，二级销区，品牌以及门店名称查询查询门店信息列表,默认查10条数据
				const params = {
					code: that.getCode() || '',
					rp02name: that.form.rp02name || '',
					rp03name: that.form.rp03name || '',
					brandCode: that.form.brandCode || '',
					brand: (that.form.brand === '全部品牌' ? '' : that.form.brand),
					storeName: that.form.storeName || '',
					pageNum: that.currentPage,
					pageSize: 20
				};
				getStoreList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						if (rs.code == 200) {
							const list = rs.data || [];
							if (list.length < 10) {
								that.canGetMoreStore = false
							}
							if (more) {
								that.storeList = that.storeList.concat(list);
							} else {
								that.storeList = list;
							}
							if (that.storeList.length == 0) {
								that.$refs.uToast.show({
									title: '查无门店信息',
									type: 'warning',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取门店信息列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
				});
			},
			getNearLocation() {
				const that = this;
				if ((!that.province) || (!that.city) || (!that.latitude) || (!that.longitude)) {
					that.$refs.uToast.show({
						title: '没有查询到定位附近的门店，请手动选择',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
					return;
				}
				const params = {
					province: that.province,
					city: that.city,
					latitude: that.latitude,
					longitude: that.longitude
				};
				getNearByStores(params, function(res) {
					console.log('获取附近门店:');
					console.log(res);
					if (res.statusCode == 200) {
						const rs = res.data;
						if (rs && rs.code == 200) {
							const pointsListRes = rs.data || [];
							that.nearStoreList = [];
							if (pointsListRes) {
								for (const item in pointsListRes) {
									const obj = pointsListRes[item];
									obj.RANGE = item;
									that.nearStoreList.push(obj);
								}
							}
							console.log('可选的附近门店:');
							console.log(that.nearStoreList);
						} else {
							that.$refs.uToast.show({
								title: rs.msg || '没有查询到定位附近的门店，请手动选择',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						}
					}
				}, function(e) {
					console.log('获取附近门店-error:');
					console.log(e);
					that.$refs.uToast.show({
						title: '没有查询到定位附近的门店，请手动选择',
						type: 'error',
						duration: 3000,
						callback: function() {
							return;
						}
					});
				})
			},
			// 点击actionSheet回调
			showFn: function() {
				const that = this;
				if (that.actionSheetList.length > 0) {
					that.show = true;
				} else {
					const params = {
						code: that.getCode()
					};
					getRp02nameList(params, function(resuser) {
						if (resuser && resuser.statusCode == 200) {
							const rs = resuser.data;
							console.log('一级销区列表结果:');
							console.log(rs);
							if (rs.code == 200) {
								that.actionSheetList = rs.data || [];
								if (that.actionSheetList.length > 0) {
									that.actionSheetList.forEach(function(item) {
										item.text = item.rp02name || '';
									})
								}
								console.log(that.actionSheetList);
								that.show = true;
							} else {
								if (rs.msg) {
									that.$refs.uToast.show({
										title: rs.msg || '获取一级销区列表失败',
										type: 'error',
										duration: 3000,
										callback: function() {
											return;
										}
									});
								} else {
									that.$refs.uToast.show({
										title: rs.errMsg || '获取一级销区列表失败',
										type: 'error',
										duration: 3000,
										callback: function() {
											return;
										}
									});
								}
							}
						}
					}, function(e) {
						console.log('获取一级销区列表失败:');
						console.log(e);
					});
				}
			},
			// 点击一级销区回调，查询可选的二级销区
			actionSheetCallback(e) {
				const index = e[0];
				const that = this;
				that.form.rp02 = that.actionSheetList[index].rp02;
				that.form.rp02name = that.actionSheetList[index].rp02name;
				that.form.rp03 = '';
				that.form.rp03name = '';
				that.form.brand = '';
				that.form.brandCode = '';
				that.form.storeName = '';
				that.form.storeAddress = '';
				// 查询可选的二级销区
				const params = {
					rp02: that.form.rp02
				};
				getRp03nameList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('二级销区列表结果:');
						console.log(rs);
						if (rs.code == 200) {
							that.actionSheetList2 = rs.RP03 || [];
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取二级销区列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取二级销区列表失败:');
					console.log(e);
				});
			},
			show2Fn: function() {
				const that = this;
				if (that.form.rp02name.length > 0) {
					if (that.actionSheetList2.length > 0) {
						that.show2 = true;
					} else {
						const params = {
							rp02: that.form.rp02
						};
						getRp03nameList(params, function(resuser) {
							if (resuser && resuser.statusCode == 200) {
								const rs = resuser.data;
								console.log('二级销区列表结果:');
								console.log(rs);
								if (rs.code == 200) {
									that.actionSheetList2 = rs.RP03 || [];
									that.show2 = true;
								} else {
									if (rs.msg) {
										that.$refs.uToast.show({
											title: rs.msg || '获取二级销区列表失败',
											type: 'error',
											duration: 3000,
											callback: function() {
												return;
											}
										});
									}
								}
							}
						}, function(e) {
							console.log('获取二级销区列表失败:');
							console.log(e);
							that.$refs.uToast.show({
								title: '获取二级销区列表失败',
								type: 'error',
								duration: 3000,
								callback: function() {
									return;
								}
							});
						});
					}
				} else {
					that.$refs.uToast.show({
						title: '请先选择一级销区',
						type: 'warning',
						duration: 3000,
						callback: function() {
							return;
						}
					});
				}
			},
			actionSheetCallback2(e) {
				const index = e[0];
				this.form.rp03 = this.actionSheetList2[index].rp03;
				this.form.rp03name = this.actionSheetList2[index].rp03name;
				this.form.brand = '';
				this.form.brandCode = '';
				this.form.storeName = '';
				this.form.storeAddress = '';
			},
			show3Fn: function() {
				const that = this;
				const params = {
					rp02: that.form.rp02,
					rp03: that.form.rp03
				};
				getBrandList(params, function(resuser) {
					if (resuser && resuser.statusCode == 200) {
						const rs = resuser.data;
						console.log('品牌列表结果:');
						console.log(rs);
						if (rs.code == 200) {
							const arr = [{
								brandCode: '',
								brand: '全部品牌'
							}];
							const arr2 = rs.brand || [];
							that.actionSheetList3 = arr.concat(arr2);
							that.show3 = true;
						} else {
							if (rs.msg) {
								that.$refs.uToast.show({
									title: rs.msg || '获取品牌列表失败',
									type: 'error',
									duration: 3000,
									callback: function() {
										return;
									}
								});
							}
						}
					}
				}, function(e) {
					console.log('获取品牌列表失败:');
					console.log(e);
				});
			},
			actionSheetCallback3(e) {
				const index = e[0];
				this.form.brandCode = this.actionSheetList3[index].brandCode;
				this.form.brand = this.actionSheetList3[index].brand;
				this.form.storeName = '';
				this.form.storeAddress = '';
				this.currentPage = 1;
				// 查询门店列表
				console.log('查询门店列表:');
				console.log('品牌:'+this.form.brand);
				this.queryStoreList();
			}
		}
	}
</script>

<style>
	page,
	.search-container {
		background-color: #F3F5F7;
	}

	.search-hd {
		width: 100%;
		height: 302rpx;
		position: fixed;
		left: 0;
		top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx 0 0;
	}

	#myForm {
		width: 100%;
		height: 302rpx;
	}

	.search-bd {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 346rpx;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.my-input-rp02name {
		width: 150rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
	}

	.my-input-rp03name,
	.my-input-brand {
		width: 150rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		margin-left: 10rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
	}

	.my-input-brand {
		margin-right: 30rpx;
	}

	.my-input-storeAddress {
		width: 540rpx;
		height: 98rpx;
		background: #F7F7F7;
		border-radius: 16rpx;
		padding-left: 15rpx !important;
		padding-right: 15rpx !important;
		margin-right: 30rpx;
		margin-top: 6rpx;
	}

	.search-bd-item {
		width: 710rpx;
		margin-left: 20rpx;
		padding: 20rpx 10rpx 20rpx 20rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #555555;
		line-height: 48rpx;
		border-bottom: 2rpx solid #F2F2F2;
	}

	.my-u-picker {
		position: fixed;
		z-index: 99 !important;
	}
</style>
